import { Transfer,Button,Table,Input} from "antd";

import { useEffect, useState } from "react";
import { getShop } from "../api/purchase";
const columns:any = [
  {
    title: '店铺编码',
    dataIndex: 'id',
     
  },
  {
    title: '店铺名称',
    dataIndex: 'name',
  },
  {
    title: '管理区域',
    dataIndex: 'address',
  },
  {
    title: '业态',
    dataIndex: 'type',
  },
];
function SelectShop(props:any) {
  const [ dataSource,setDataSource] = useState<any>([])
  const [ targetSource,setTargetSource] = useState<any>([])
  const [selectOriginRow,setSelectOriginRow] = useState<any>([])
  const [selectTargetRow,setSelectTargetRow] = useState<any>([])

  const [pagination,setPagination]=useState({
    pageSize:10,
    total:1,
    current:1
  })
  function getSource(){
    
    getShop(params)
    .then(res=>{
      setDataSource(res.data.data)
      const pa = res.data.pagnation;
      setPagination({...pagination,total:pa.total})
    })
  }
  const [params,setParams] = useState({name:'',type:'',address:"",current:1,total:1,size:10})
  useEffect(()=>{
    getSource()
  },[params.current])
  useEffect(()=>{
    if(props.groupInfo.products){
      getShop({id:props.groupInfo.products})
      .then(res=>{
        setTargetSource(res.data.data)       
      })
    }
  },[props.groupInfo.products])
  const selectChange = (selectedRowKeys: React.Key[], selectedRows:any[])=>{
    console.log(selectedRowKeys,selectedRows)
    setSelectOriginRow(selectedRows)
  }
  const selectTargetChange = (selectedRowKeys: React.Key[], selectedRows:any[])=>{
    
    setSelectTargetRow(selectedRows)
  }
  const addTarget = ()=>{
      const rows = selectOriginRow.concat(targetSource);
      setTargetSource(rows);
      const originRow =dataSource.filter((element:any)=>{
        return !selectOriginRow.some((item:any)=>item.id==element.id)
      })
      setDataSource(originRow)
  }
  const addOrigin = ()=>{
    const rows = selectTargetRow.concat(dataSource);
    setDataSource(rows);
    const targetRow =targetSource.filter((element:any)=>{
      return !selectTargetRow.some((item:any)=>item.id==element.id)
    })
    setTargetSource(targetRow)
}
const sureSelect = ()=>{
  const productsId = targetSource.map((item:any)=>item.id).join(',');
  props.setGroupInfo({...props.groupInfo,products:productsId})
  props.setShowShop(false);
}
 
  return ( <div className="SelectShop">
     <div className="content">
      <div className="left">
        <h3>选择店铺</h3>
      <div className="half">
        <span >
        店铺：<Input 
        value={params.name} onChange={e=>setParams({...params,name:e.target.value})}/>
        </span>
        <span >
        
        业态：<Input value={params.type} onChange={e=>setParams({...params,type:e.target.value})}/>
        </span>
        
        <span>
        管理区域：<Input value={params.address} onChange={e=>setParams({...params,address:e.target.value})}/>
        </span>
        <span>
          <Button onClick={getSource}>搜索</Button>
        </span>
       

      </div>
        <Table 
           rowKey="id"
            size="small"
           rowSelection={{
            type:'checkbox',
            onChange:selectChange
          }}
          columns={columns}
          dataSource={dataSource}
          pagination={{...pagination,current:params.current}}
          onChange={(pa)=>{
            setParams({...params,current:Number(pa.current)})
          }}
        ></Table>
      </div>
      <div className="btns" >
        <div><Button onClick={addTarget}>添加&gt;&gt;</Button></div>
        <div><Button onClick={addOrigin}>&lt;&lt;取消</Button></div>
      </div>
      <div className="right">
      <h3>已选店铺</h3>
      <Table
       style={{marginBottom:32,minHeight:320}} 
       rowKey="id"
            size="small"
           rowSelection={{
            type:'checkbox',
            onChange:selectTargetChange
          }}
          columns={columns}
          dataSource={targetSource}  
          pagination={false}       
        ></Table>
        <p style={{textAlign:'right'}}>
        <Button  onClick={()=>props.setShowShop(false)}>取消</Button>
        <Button type="primary" onClick={sureSelect}>确定选择店铺</Button>
      </p>
      </div>
     </div>
    
  </div> );
}

export default SelectShop;